/* eslint-disable no-console */
(function ($) {
    // ================================ 滑块控件 ================================
    /**
     * 更新滑块数值（页面）
     * @param {string} key - 滑块名称
     * @param {number} value - 滑块数值
     */
    function toggleRange(key, value) {
        const $range = $(`input[name="${key}"]`);
        if($range.length === 0) {
            console.error(`[module] 未找到滑块控件: #${key}`);
            return;
        }
        $range.val(value);
    }

    /**
     * 更新滑块数值（本地存储）
     * @param {string} key - 滑块名称
     */
    function updateRangeToLocalStorage(key){
        const range = window.getSettingsFromUserSettings(key, 'range');
        // 方括号包裹变量名，才能将变量作为对象的键名，不然会直接使用 key 作为属性名
        window.AppUtils.updateLocalStorage('userSettings', {range: {[key]: range}});
    }

    /**
     * 更新元素
     * @param key 滑块名称
     * @param {string} value 滑块数值
     * 【CSS 变量作用域的继承机制】
     *  1) CSS文件中定义了:root {--wallpaper-alpha、--wallpaper-alpha body}
     *  2）代码中修改的是 body，而 body 是 :root 的子元素，CSS 变量遵循就近原则
     *  3）会优先使用 body 上的新值，而不是 :root 的默认值
     */
    function updateElementsWithRange(key, value) {
        if (key === 'maskOpacity') {
            // 遮罩浓度控制 (0-100 => 0-1)
            $('body').css("--wallpaper-alpha", `${value/100}`);
        } else if (key === 'blurIntensity') {
            // 模糊度控制 (0-100 => 0-20px)
            const blurValue = Math.floor(value / 5); // 根据图片比例换算
            $('body').css("--wallpaper-filter", blurValue);
        } else if (key === 'searchBoxSize') {
            $('#search .super-search-fm .search-box').css('height', `${Math.floor(value * 1.2)}px`);
        } else if (key === 'searchBoxWidth') {
            $('#search .super-search-fm').css('--search-width', `${value}%`);
        } else if (key === 'searchBoxHeight') {
            $('#search').css('--search-height', `${Math.floor(value / 7.5)}%`); // 整数百分比（向下取整）
        } else if (key === 'searchBoxRadius') {
            $('#search').css('--search-radius', `${Math.floor(value * 0.8)}px`); // 整数像素值（向下取整）
        } else if (key === 'searchBoxOpacity') {
            $('#search').css('--search-opacity', `${value / 100}`);
        }
    }

    /**
     * 更新滑块文本以及对应元素（页面）
     * @param {string} key - 滑块名称
     */
    function updateRangeText(key){
        // 文本后缀
        const suffix = key === 'switchInterval'? "" : "%"
        const $rangeValue = $(`#${key}Value`)
        const value = $(`#${key}`).val();
        if($rangeValue.length === 0) {
            console.error(`[module] 未找到滑块文本控件: #${key}Value`);
            return;
        }
        $rangeValue.text(`${value}${suffix}`);
    }

    /**
     * 监听所有滑块滑动事件
     */
    function bindRangeEvents(config) {
        Object.keys(config).forEach(name => {
            $(`input[name="${name}"]`).on('input change', function () {
                const value = $(this).val();
                updateRangeToLocalStorage(name);
                updateRangeText(name);
                updateElementsWithRange(name,  value)
                if (name === 'switchInterval') {
                    const state = window.getSettingsFromUserSettings("autoSwitchWallpaper", 'bootstrap-switch');
                    window.autoSwitchWallpaper('autoSwitchWallpaper', state);
                }
            });
        });
    }

    /**
     * 初始化所有滑块状态（页面）
     */
    function bindInitRange(config) {
        Object.keys(config).forEach(name => {
            const value = window.getSettingsFromUserSettings(name, 'range');
            toggleRange(name, value);
            updateRangeText(name);
            updateElementsWithRange(name,  value)
        });
    }

    function initRange() {
        bindInitRange(window.rangeConfigs);
        bindRangeEvents(window.rangeConfigs);
    }

    window.initRange = initRange;
})(window.jQuery);